<template>
  <div class="home-wrap">
    <div
      class="title-"
      :style="{height:navHeight+'px'}"
    >
      <div class="text-">斗罗校园</div>
    </div>
    <div class="disk-wrap">
      <img
        class="panel-disk"
        src="http://img.douluotianxia.com/img/dlxy_index.png"
      />
      <div class="panel">
        <div
          class="sector"
          v-for="(item, index) in list"
          :key="item.name"
        >
          <div
            class="sector-inner"
            @click="goItem(item.url)"
          >
            <!-- <image mode="widthFix" class="sector-icon" :src="item.icon" :alt="item.name" />
            <span>{{item.name}}</span> -->
          </div>
        </div>
      </div>
      <div
        class="fake-one"
        @click="goItem('/pages/shop/index/main')"
      ></div>
      <div
        class="fake-two"
        @click="goItem('/pages/task/flea/main')"
      ></div>
      <div class="round-btn"></div>
    </div>
    <alert-add
      :visible="addVisible"
      @show="handleShow"
    />
    <alert-city
      :visible="cityVisible"
      @show="handleCity"
      @submit="changeCity"
    />
  </div>
</template>

<script>
import AlertAdd from "@/components/addAlert.vue";
import AlertCity from "@/components/cityAlert.vue";
// const shopIcon = require("../../../static/images/shop.png");
// const marketIcon = require("../../../static/images/market.png");
// const orderIcon = require("../../../static/images/order.png");
// const gameIcon = require("../../../static/images/game.png");
// const rechargeIcon = require("../../../static/images/recharge.png");
// const jobIcon = require("../../../static/images/job.png");
export default {
  data() {
    return {
      list: [
        {
          // icon: shopIcon,
          name: "校园超市",
          url: "/pages/shop/index/main"
        },
        {
          // icon: marketIcon,
          name: "跳蚤市场",
          url: "/pages/task/flea/main"
        },
        {
          // icon: orderIcon,
          name: "跑腿",
          url: "/pages/task/runleg/main"
        },
        {
          // icon: gameIcon,
          name: "游戏",
          url: "/pages/my/download/main"
        },
        // {
        //   icon: rechargeIcon,
        //   name: "充值",
        //   url: "/pages/recharge/main"
        // },
        {
          // icon: jobIcon,
          name: "兼职",
          url: "/pages/job/list/main"
        }
      ],
      addVisible: false,
      cityVisible: false,
      schoolList: [],
      navHeight: 0
    };
  },
  components: {
    "alert-add": AlertAdd,
    "alert-city": AlertCity
  },
  methods: {
    bindViewTap() {
      const url = "../logs/main";
      if (mpvuePlatform === "wx") {
        mpvue.switchTab({
          url
        });
      } else {
        mpvue.navigateTo({
          url
        });
      }
    },
    goItem(url) {
      if (url == '/pages/shop/index/main' && !this.$getStorage('schoolInfo')) {
        this.handleCity();
        return;
      }
      wx.navigateTo({ url });
    },
    handleShow() {
      this.addVisible = !this.addVisible;
    },
    handleCity() {
      this.cityVisible = !this.cityVisible;
    },
    changeCity(e) {
      this.handleCity();
      this.handleShow();
    }
  },
  onLoad(e) {
    if (e.inviteid) {
      wx.setStorageSync("inviteid", e.inviteid);
    }
    wx.getSystemInfo({
      success: res => {
        //导航高度
        this.navHeight = res.statusBarHeight + 46;
      }, fail(err) {
        console.log(err);
      }
    })
  },
  onShow() {
    const memberId = wx.getStorageSync("memberId");
    let options = wx.getStorageSync("usersig");
    let userID = "FT_" + memberId;
    if (options && userID) {
      wx.$app
        .login({
          userID: userID,
          userSig: options
        })
        .then(() => {
          wx.$app.ready(() => {
            wx.hideLoading();
            wx.$app.getMyProfile().then(res => {
              this.$store.commit("updateMyInfo", res.data);
            });
          });
        });
    }
  },
  onHide() {
    this.addVisible = false;
    this.cityVisible = false;
  }
};
</script>
<style lang="scss" scoped>
.home-wrap {
  height: 100%;
  position: relative;
  background: url("http://img.douluotianxia.com/img/home_bg.png");
  background-size: 100% 100%;
  overflow: hidden;
}
.home-wrap .title- {
  font-size: 14px;
  text-align: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  color: white;
}
.home-wrap .title- .text- {
  width: 100%;
  height: 45px;
  line-height: 45px;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 10;
  font-family: PingFang-SC-Medium;
  font-size: 18px;
}
.home-wrap__bg {
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: -50px;
  left: 0px;
}
.disk-wrap,
.panel-disk {
  width: p2r(750px);
  height: p2r(750px);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.panel {
  position: relative;
  top: p2r(106px);
  left: p2r(106px);
  height: p2r(538px);
  width: p2r(538px);
  border-radius: p2r(269px);
}
.sector {
  position: absolute;
  left: p2r(269px);
  top: 0px;
  width: p2r(269px);
  height: p2r(538px);
  font-size: 14px;
  border-radius: 0px p2r(269px) p2r(269px) 0;
  overflow: hidden;
  transform-origin: left center;
}
.sector-inner {
  text-align: center;
  display: block;
  width: p2r(316px);
  padding: p2r(20px) p2r(3px) 0 p2r(57px);
  height: p2r(538px);
  transform: translateX(p2r(-269px)) rotate(72deg);
  transform-origin: right center;
  border-radius: p2r(269px) 0 0 p2r(269px);
  .sector-icon {
    width: 34px;
    transform-origin: center;
  }
  span {
    display: block;
    transform-origin: center;
    color: #fff;
    font-weight: bold;
  }
}
.sector:nth-of-type(1) {
  transform: rotate(-36deg);
  .sector-inner {
    z-index: 999;
    position: absolute;
    .sector-icon {
      transform: rotate(-30deg);
      padding-top: 20px;
      padding-right: 15px;
    }
    span {
      transform: rotate(-30deg);
      padding-left: 30px;
      padding-top: 15px;
    }
  }
}
.sector:nth-of-type(2) {
  transform: rotate(36deg);
  .sector-inner {
    .sector-icon {
      padding-right: 50px;
      padding-bottom: 15px;
      transform: rotate(-90deg);
    }
    span {
      position: relative;
      left: 25px;
      top: -6px;
      transform: rotate(-90deg);
    }
  }
}
.sector:nth-of-type(3) {
  transform: rotate(108deg);
  .sector-inner {
    .sector-icon {
      padding-right: 0px;
      padding-bottom: 40px;
      transform: rotate(-150deg);
    }
    span {
      position: relative;
      left: 10px;
      top: -55px;
      transform: rotate(-150deg);
    }
  }
}
.sector:nth-of-type(4) {
  transform: rotate(180deg);
  .sector-inner {
    .sector-icon {
      padding-right: 0px;
      padding-bottom: 55px;
      transform: rotate(-210deg);
    }
    span {
      position: relative;
      left: -2px;
      top: -55px;
      transform: rotate(-210deg);
    }
  }
}
.sector:nth-of-type(5) {
  transform: rotate(252deg);
  .sector-inner {
    .sector-icon {
      padding-left: 28px;
      padding-bottom: 40px;
      transform: rotate(-270deg);
    }
    span {
      position: relative;
      left: -12px;
      top: -30px;
      transform: rotate(-270deg);
    }
  }
}
// .sector:nth-of-type(6) {
//   transform: rotate(270deg);
//   .sector-inner {
//     .sector-icon {
//       padding-left: 30px;
//       padding-top: 10px;
//       transform: rotate(-330deg);
//     }
//     span {
//       position: relative;
//       left: -9px;
//       top: 10px;
//       transform: rotate(-330deg);
//     }
//   }
// }
.fake-one {
  position: absolute;
  width: 140px;
  height: 90px;
  top: 50px;
  left: 115px;
  border-radius: 70px;
  border-bottom-left-radius: 170px;
  border-bottom-right-radius: 170px;
}
.fake-two {
  width: 200rpx;
  height: 200rpx;
  border-top-left-radius: 50px;
  position: absolute;
  top: 90px;
  right: 55px;
}
.round-btn {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -45px;
  margin-top: -45px;
}
</style>
